<template>
	<div>
		<h1>计算属性</h1>
		<label>姓:<input type="text" placeholder="姓" v-model="firstname" /></label>
		<label>名:<input type="text" placeholder="名" v-model="lastname" /></label>
		<br />
		<label>(单项)姓名:<input type="text" placeholder="姓名" v-model="fullnameone" /></label>
        <label>(双向)姓名:<input type="text" placeholder="姓名" v-model="fullnametwo" /></label>
	</div>
</template>

<script>
	export default {
		name: 'Computed',
		data() {
			return {
				firstname: '',
				lastname: ''
			}
		},
		computed: {
			fullnameone: {
				get() {
					return this.firstname + '.' + this.lastname
				}
			},
			fullnametwo: {
				get() {
					return this.firstname + '.' + this.lastname
				},
				set(value){
					console.log(`setter ${value}`)
					let names = value.split('.')
					console.log(names)
					this.firstname = names[0]
					this.lastname = names[1]
				}
			}

		}
	}
</script>

<style>
</style>
